/*
 * @Author: wwl 2967796480@qq.com
 * @Date: 2023-08-04 14:56:03
 * @LastEditors: wwl 2967796480@qq.com
 * @LastEditTime: 2023-09-06 10:39:25
 * @FilePath: \ConstantBlueCloud_WEB_USER\src\components\form\dataCollectionConfigModal.tsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import {uEditUploadInterval} from '@/api/dataCollection'
import {state} from '@/store/login'
import {FormInstance, message} from 'ant-design-vue'
import dayjs, {Dayjs} from 'dayjs'
import {PropType} from 'vue'
import {ChangeVisible} from '../modal'
import {CnNormalSpan} from '../text'

const DataCollectionConfigModal = defineComponent({
  name: 'DataCollectionConfigModal',
  props: {
    devId: {
      type: Number,
      required: true
    },
    changeVisible: Function as PropType<ChangeVisible>,
    devInfo: Object
    // config: {
    //   type: Object as PropType<Alarm.ConfigData>,
    //   required: true
    // }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, ctx) {
    const state = reactive<{
      intervalData: number
    }>({
      intervalData: props.devInfo.devCollectRate
    })

    function handleConfirmClick() {
      if (state.intervalData < 5) {
        message.error('采集频率最低五分钟一次')
        return
      }

      uEditUploadInterval({devId: props.devId, intervalData: state.intervalData}).catch(err => {})

      handleCancelClick()
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    onMounted(() => {
      // console.log(props.devInfo)
    })

    return () => (
      <div class='relative'>
        <table class='table-auto block w-full pl-32 mb-21'>
          <tbody>
            <tr class='h-56 flex items-center'>
              <td class=''>
                <CnNormalSpan class='text-text'>采集频率</CnNormalSpan>
              </td>
              <td class='w-198 ml-24'>
                <a-input
                  class='w-full'
                  v-model={[state.intervalData, 'value']}
                  type='number'
                  placeholder='请输入'
                ></a-input>
              </td>
              <td class='h-full inline-block pt-26'>
                <CnNormalSpan class='ml-8'>分钟/次</CnNormalSpan>
              </td>
            </tr>
          </tbody>
        </table>

        <div class='ant-modal-footer'>
          <a-button class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          {/* <a-popconfirm
            title="是否确认修改此标准? 修改后平台对您水质数据的分析将会使用此标准!"
            ok-text="确认"
            cancel-text="取消"
            onConfirm={handleConfirmClick}
            onCancel={() => { }}
          > */}
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
          {/* </a-popconfirm> */}
        </div>
      </div>
    )
  }
})

export default DataCollectionConfigModal
